import { styled } from '@umijs/max'
import { Descriptions, Modal, Popover, Space, Spin, Switch } from 'antd';
import { Card } from "@/components/Card"
import { useEffect, useState } from 'react';
import { BusinessInfo, CertificateType, VinCheck, updateVinCheck } from './services';
import { useRequest } from 'ahooks';
import { QuestionCircleFilled } from '@ant-design/icons';

interface RowData1Props {
  baseInfo?: BusinessInfo
  loading?: boolean
}

const Container = styled.div`
  width: 100%;
`

const RowData2: React.FC<RowData1Props> = (props) => {
  const [vinCheck, setVinCheck] = useState(false)
  const { runAsync } = useRequest(updateVinCheck, {
    manual: true,
    onSuccess: () => {
      setVinCheck(!vinCheck)
    }
  })

  const onVinCheckChange = (checked: boolean) => {
    Modal.confirm({
      title: '确认',
      content: `确认${checked ? '开启' : '关闭'}扫码充电权限吗？`,
      onOk: () => runAsync({isVinCheck: checked ? 1 : 2}),
    })
  }

  useEffect(() => {
    if (props.baseInfo) {
      setVinCheck(props.baseInfo.isVinCheck === VinCheck.允许)
    }
  }, [props.baseInfo])

  return (
    <Container>
      <Card header='企业基本信息'>
        <Spin spinning={props.loading}>
          <Descriptions column={3}>
            <Descriptions.Item label='扫码充电权限'>
              <Space>
                <Switch checked={vinCheck} onChange={onVinCheckChange} />
                <Popover content={'针对大客户的「扫码充电」，若车/桩无法提供VIN码，仍将允许充电，并记录订单在对应公司账户下。'}>
                  <QuestionCircleFilled />
                </Popover>
              </Space>
            </Descriptions.Item>
            <Descriptions.Item label='登录账号'>{props.baseInfo?.loginPhone || '--'}</Descriptions.Item>
            <Descriptions.Item label='证件类型'>{props.baseInfo?.orgType !== undefined ? CertificateType[props.baseInfo.orgType] : '--'}</Descriptions.Item>
            <Descriptions.Item label='证件号码'>{props.baseInfo?.orgCode || '--'}</Descriptions.Item>
            <Descriptions.Item label='公司地址'>{props.baseInfo?.companyAddress || '--'}</Descriptions.Item>
            <Descriptions.Item label='联系电话'>{props.baseInfo?.companyPhone || '--'}</Descriptions.Item>
            <Descriptions.Item label='负责人'>{props.baseInfo?.chiefName || '--'}</Descriptions.Item>
            <Descriptions.Item label='负责人电话'>{props.baseInfo?.chiefPhone || '--'}</Descriptions.Item>
          </Descriptions>
        </Spin>
      </Card>
    </Container>
  );
};

export default RowData2;
